

import 'dart:math' as math;

import 'package:circular_seek_bar/circular_seek_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sample/src/component/semi_circular_down_seek_bar.dart';
import 'package:go_router/go_router.dart';

import 'component/circular_seek_bar.dart';
import 'component/semicircular_down_seek_bar.dart';

class CircularSeekBarPage extends StatefulWidget {
  const CircularSeekBarPage({super.key});

  @override
  State<CircularSeekBarPage> createState() => _CircularSeekBarPageState();
}

class _CircularSeekBarPageState extends State<CircularSeekBarPage> {

  final ValueNotifier<double> _valueNotifier = ValueNotifier(0);
  final ValueNotifier<double> _valueNotifier1 = ValueNotifier(0);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: TextButton(onPressed: () {
          context.pop();
        }, child: Text("返回")),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            CircularSeekBar(
              width: 200,
              height: 200,
              progress: 80,
              barWidth: 10,
              startAngle: 180,
              sweepAngle: 360,
              strokeCap: StrokeCap.round,
              progressColor: Colors.white,
              trackColor: Color(0x1AEDEDF3),
              animation: true,
              interactive: false,
              valueNotifier: _valueNotifier1,
              child: Center(
                child: ValueListenableBuilder(
                    valueListenable: _valueNotifier1,
                    builder: (_, double value, __) => Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text('${value.round()}',style: TextStyle(fontSize: 28, fontWeight: FontWeight.w600), ),
                        Text('Optimal', style: TextStyle(fontSize: 14,fontWeight: FontWeight.w500),),
                      ],
                    )),
              ),
            ),
            CircularSeekBar(
              width: double.infinity,
              height: 120,
              progress: 60,
              barWidth: 8,
              startAngle: 45,
              sweepAngle: 270,
              strokeCap: StrokeCap.butt,
              progressGradientColors: const [Colors.blue, Colors.red, Colors.purple],
              dashWidth: 1,
              dashGap: 2,
              animation: true,
            ),
            CircularSeekBar(
              width: 200,
              height: 200,
              progress: 50,
              barWidth: 8,
              startAngle: 45,
              sweepAngle: 360,
              strokeCap: StrokeCap.round,
              trackGradientColors: const [Color(0xff00C4CB), Color(0xff008EE6),Color(0xFF3B35F6), Color(0xff7B2AE4), Color(0xffE1269F)],
              progressGradientColors: const [Color(0xFF00C4CB), Color(0xFF008EE6),Color(0xFF3B35F6), Color(0xFF7B2AE4), Color(0xFFE1269F)],
              innerThumbRadius: 5,
              innerThumbStrokeWidth: 0,
              innerThumbColor: Colors.black,
              outerThumbRadius: 5,
              outerThumbStrokeWidth: 5,
              outerThumbColor: Colors.white,
              interactive: false,
              dashWidth: 47.6,
              dashGap: 8,
              animation: true,
              valueNotifier: _valueNotifier,
              child: Center(
                child: ValueListenableBuilder(
                    valueListenable: _valueNotifier,
                    builder: (_, double value, __) => Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text('${value.round()}', ),
                        Text('progress', ),
                      ],
                    )),
              ),
            ),
            SemiCircularSeekBar(
              width: 240,
              height: 120,
              progress: 60,
              barWidth: 8,
              startAngle: 90,
              sweepAngle: 180,
              strokeCap: StrokeCap.round,
              progressGradientColors: const [Colors.purple, Colors.indigo, Colors.blue],
              dashWidth: 56,
              dashGap: 6,
              interactive: false,
              animation: true,
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("1111"),
                    Text("2222")
                  ],
                ),
              ),
            ),
            SizedBox(height: 10,),
            // Container(
            //   color: Colors.red,
            //   child: Transform(transform: Matrix4.identity()..rotateY(math.pi),
            //   alignment: Alignment.center,
            //   child:             SemiCircularDownSeekBar(
            //     width: 240,
            //     height: 120,
            //     progress: 60,
            //     barWidth: 8,
            //     startAngle: 90,
            //     sweepAngle: 180,
            //     strokeCap: StrokeCap.round,
            //     progressGradientColors: const [Colors.blue, Colors.indigo, Colors.purple],
            //     dashWidth: 56,
            //     dashGap: 6,
            //     interactive: false,
            //     animation: true,
            //     child: Transform(
            //       transform: Matrix4.identity()..rotateY(math.pi),
            //       alignment: Alignment.center,
            //       child: Center(
            //         child: Column(
            //           mainAxisSize: MainAxisSize.min,
            //           children: [
            //             Text("1111"),
            //             Text("2222")
            //           ],
            //         ),
            //       ),
            //     ),
            //   ),
            //   ),
            // ),

            //SizedBox(height: 40,),
            Container(
              color: Colors.transparent,
              child: SemiCircularDown2SeekBar(
                width: 240,
                height: 120,
                progress: 100,
                barWidth: 8,
                startAngle: -180,
                sweepAngle: -180,
                strokeCap: StrokeCap.round,
                progressGradientColors: const [Colors.green, Colors.indigo, Colors.purple],
                dashWidth: 56,
                dashGap: 6,
                interactive: false,
                animation: true,
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text("1111"),
                      Text("2222")
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(height: 50,),
          ],
        ),
      ),
    );
  }
}
